-#
-# Copyright (C) 2013 Google Inc., authors, and contributors <see AUTHORS file>
-# Licensed under http://www.apache.org/licenses/LICENSE-2.0 <see LICENSE file>
-# Created By:
-# Maintained By:
-#
-extends 'layouts/dashboard.haml'
-set title = 'GRC: Style Guide'

//%link(rel='stylesheet' type='text/css' href='styleguide.css')

-block header
  %ul.breadcrumbs
    %li
      %a{ 'href': '/design' }
        Style Guide
  %h1
    Visual &amp; Syntax Style Guide

-block page_help
 Nope.

-block subheader_plus
  %a.navbarplus.pull-right{ 'href': '#comingsoonModal', 'data-toggle': 'modal' }

-block main
  .container-fluid
    .row-fluid
      .span3.bs-docs-sidebar

        %ul.nav.nav-list.bs-docs-sidenav{ 'data-spy': 'affix', 'data-offset-top': '25' }
          %li
            %a{ 'href': '#code' }
              %i.icon-chevron-right
              Code Guidelines
          %li
            %a{ 'href': '#headers' }
              %i.icon-chevron-right
              Headers
          %li
            %a{ 'href': '#breadcrumb' }
              %i.icon-chevron-right
              Breadcrumbs
          %li
            %a{ 'href': '#modals' }
              %i.icon-chevron-right
              Modals
          %li
            %a{ 'href': '#objects' }
              %i.icon-chevron-right
              Objects
          %li
            %a{ 'href': '#icons' }
              %i.icon-chevron-right
              Icons
          %li
            %a{ 'href': '#list' }
              %i.icon-chevron-right
              Tree List
          %li
            %a{ 'href': '#nesting' }
              %i.icon-chevron-right
              Nesting
          %li
            %a{ 'href': '#buttons' }
              %i.icon-chevron-right
              Buttons
          %li
            %a{ 'href': '#progress' }
              %i.icon-chevron-right
              Progress Bar
          %li
            %a{ 'href': '#actions' }
              %i.icon-chevron-right
              Actions List
          %li
            %a{ 'href': '#widgets' }
              %i.icon-chevron-right
              Widgets
          %li
            %a{ 'href': '#flash-notice' }
              %i.icon-chevron-right
              Flash Notices
          %li
            %a{ 'href': '#popover' }
              %i.icon-chevron-right
              Popover
          %li
            %a{ 'href': '#helper' }
              %i.icon-chevron-right
              Helper classes

      .span9.styleguide-content

        %section#code.widget
          %section.header
            %h2
              Code Guidelines
          %section.content
            %h2
              HamlPy
            %p
              Please follow these rules when creating HamlPy templates.
              There are many alternatives to proposed code style, but
              these are chosen and all templates need to follow these
              rules for code consistency and understanding.

            %h3
              1. Use 2 spaces for indentation
            .row-fluid
              .span6
                .coding.good
                  %strong
                    Good
                  %br
                  \%p
                  %br
                  &nbsp;&nbsp;Hello World
              .span6
                .coding.bad
                  %strong
                    Wrong
                  %br
                  \%p
                  %br
                  &nbsp;&nbsp;&nbsp;&nbsp;Hello World

            %h3
              2. Always single-quote attribute names
            .row-fluid
              .span6
                .coding.good
                  %strong
                    Good
                  %br
                  \%a{ 'href': 'blah', 'data-popover': 'yar' }
              .span6
                .coding.bad
                  %strong
                    Wrong
                  %br
                  \%a{ 'href': "blah", 'data-popover': "yar" }

            %h3
              3. No whitespace before colons or commas
            .row-fluid
              .span6
                .coding.good
                  %strong
                    Good
                  %br
                  \%a{ 'href': 'blah', 'data-popover': 'yar' }
              .span6
                .coding.bad
                  %strong
                    Wrong
                  %br
                  \%a{ 'href' : "blah" , 'data-popover' : "yar" }

            %h3
              4. One space after each colon or comma, and inside each { or } (but not "(" or ")")
            .row-fluid
              .span6
                .coding.good
                  %strong
                    Good
                  %br
                  \%a{ 'href': '\={ something }' }
              .span6
                .coding.bad
                  %strong
                    Wrong
                  %br
                  \%a{'href': '\={something}'}

            %h3
              5. Always use \={ var } when using variables in attributes
            .row-fluid
              .span6
                .coding.good
                  %strong
                    Good
                  %br
                  \%a{ 'href': '\={ var }' }
              .span6
                .coding.bad
                  %strong
                    Wrong
                  %br
                  \%a{ 'href': '\#{var}' }

            %h3
              6. No space after - or = at the beginning of the line
            .row-fluid
              .span6
                .coding.good
                  %strong
                    Good
                  %br
                  \-something
                  %br
                  \=var
              .span6
                .coding.bad
                  %strong
                    Wrong
                  %br
                  \- something
                  %br
                  \= var

            %h3
              7. If the tag uses attribute specified in braces ({...}), don't use a trailing = or trailing text.
            .row-fluid
              .span6
                .coding.good
                  %strong
                    Good
                  %br
                  \%a.someclass=var
                  %br
                  \%a{ 'class': 'someclass', 'data-title': 'gGRC' }
                  %br
                  &nbsp;&nbsp;=var
              .span6
                .coding.bad
                  %strong
                    Wrong
                  %br
                  \%a{ 'class': 'someclass', 'data-title': 'gGRC' }=var
            %h3
              8. Use only simple variables, filters, and function/macro calls in attributes or output braces
            .row-fluid
              .span12
                .coding.good
                  %strong
                    Good
                  %br
                  \-set link_title = instance.title if instance is defined else "default"
                  %br
                  \%a{ 'title': '\={ link_title|title }' }
            .row-fluid
              .span12
                .coding.bad
                  %strong
                    Wrong
                  %br
                  \%a{ 'title': '\={ instance.title if instance is defined else "default" }' }
            %h3
              9. Always define internal variables at the earliest possible time, either at the top of the template or immediately inside a loop or if statement.  (This will make it easier to refactor into macros, context_processors, helpers, etc).
            %br
            %h3
              10. Related: Always declare the required context variables in comments at the top of the file. Also mention required partial templates/helpers/macros.
            .row-fluid
              .span12
                .coding.good
                  %strong
                    Good
                  %br
                  \-# Context: instance, config
                  %br
                  %br
                  %strong
                    Even better
                  %br
                  \-# Context: instance, config
                  %br
                  \-# Templates: 'shared/_show_model.haml', 'shared/_related.haml'
                  %br
                  \-# Macros: required_external_macro(param1, param2)
            %h3
              11. When passing context variables into an included template, wrap as closely as possible to the "include" itself.
            .row-fluid
              .span12
                .coding.good
                  %strong
                    Good
                  %br
                  \-with widget_class = 'widget-tabs'
                  %br
                  &nbsp;
                  \-include 'dashboard/_governance.haml'
            %h3
              12. Use the same file-name convention as rails &mdash; e.g., use _ prefix for partial templates (even though it must be specified within the template path).  No "_" prefix for templates which may be referenced directly from controller methods.
            %br
            %h3
              13. No trailing whitespace ever, even on blank lines.
            %br
            %h3
              14. Attributes can be specified on multiple lines. Where possible, use this to keep lines to <= 79 characters. Always double-indent attributes, to avoid aligning with nested tags, and always align the closing '}' with the attribute names (or at the end of the line of the last attribute).
            .row-fluid
              .span12
                .coding.good
                  %strong
                    Good
                  %br
                  :plain
                    %span.someclass{
                  %br
                  &nbsp;&nbsp;&nbsp;
                  :plain
                    'really-long-attribute': "\={ really_long_variable_name }"
                  %br
                  &nbsp;&nbsp;&nbsp;
                  :plain
                    }
                  %br
                  &nbsp;
                  :plain
                    %span Inside
            %h2
              HamlPy Template Gotchas
            %h3
              1. The None value:
              %a{ 'href': 'https://github.com/jessemiller/HamlPy/blob/master/reference.md#attributes-without-values-boolean-attributes' } https://github.com/jessemiller/HamlPy/blob/master/reference.md#attributes-without-values-boolean-attributes
              \- Basically, if used within quotes, it will resolve to the string "None" rather than the value.
            %br
            %h3
              2. Variables don't work as attributes without quotes and \={ ... }
            %br
            %h3
              3. Most directives (lines that start with '-' and which may have nested content) will throw an error if you try to explicitly supply the matching ending directive, e.g. -endif for -if.  However, -endmacro is required to end -macro -- put it at the same indentation level as your -macro line.

        %section#headers.widget
          %section.header
            %h2
              Headers
          %section.content
            .real-example
              %h1
                h1. Main title - Lorem ipsum dolor sit amet.
              %h2
                h2. Subtitle - Lorem ipsum dolor sit amet
            %p
              style for h1 is: Bold, 24px, #444
              %br
              style for h2 is: Bold, 20px, #111

        %section#breadcrumb.widget
          %section.header
            %h2
              Breadcrumbs
          %section.content
            .real-example
              %ul.breadcrumbs
                %li
                  %a
                    Root link
                %li
                  %a
                    Second link
                %li
                  %a
                    Third link
            %p
              %strong
                Example:
            %textarea
              %ul.breadcrumbs
                %li
                  %a
                    Breadcrumb
                %li
                  %a
                    Breadcrumb inner
            %p
              %span.label.label-info
                Note!
              &nbsp; Do not put class on last %li element. It is solved from CSS.

        %section#modals.widget
          %section.header
            %h2
              Modals
          %section.content
            %a.btn{ 'data-toggle': 'modal', 'href': '#selectorSectionToControl' }
              Section to Control Mapper
            %a.btn{ 'data-toggle': 'modal', 'href': '#selectorSectionToControlNA' }
              Section to Control Mapper N/A
            %a.btn{ 'data-toggle': 'modal', 'href': '#helpModalEmpty' }
              Help Modal - Empty
            %a.btn{ 'data-toggle': 'modal', 'href': '#helpModal' }
              Help Modal
            %a.btn{ 'data-toggle': 'modal', 'href': '#programNew' }
              Create New Program (static)
            %br
            %br
              %a.btn{ 'data-toggle': 'modal', 'href': '#baseObjectNew' }
                Base Objects

        %section#objects.widget
          %section.header
            %h2
              Objects
          %section.content
            .real-example
              %table.objecticons
                %tr
                  %th
                    Program Object
                    %i (.programs)
                %tr
                  %td
                    .grcobject.programs
                      %i.grcicon-program
                    Program
              %table.objecticons
                %tr
                  %th{ 'colspan': '5' }
                    Governance Objects
                    %i (.governance)
                %tr
                  %td
                    .grcobject.governance
                      %i.grcicon-policy
                    Policy
                  %td
                    .grcobject.governance
                      %i.grcicon-regulation
                    Regulation
                  %td
                    .grcobject.governance
                      %i.grcicon-section
                    Section/Clause
                  %td
                    .grcobject.governance
                      %i.grcicon-control
                    Control
              %table.objecticons
                %tr
                  %th{ 'colspan': '8' }
                    Business Objects
                    %i (.business)
                %tr
                  %td
                    .grcobject.business
                      %i.grcicon-market
                    Market
                  %td
                    .grcobject.business
                      %i.grcicon-facility
                    Facility
                  %td
                    .grcobject.business
                      %i.grcicon-project
                    Project
                  %td
                    .grcobject.business
                      %i.grcicon-product
                    Product
                  %td
                    .grcobject.business
                      %i.grcicon-orggroup
                    Org Group
                  %td
                    .grcobject.business
                      %i.grcicon-dataasset
                    Data Asset
                  %td
                    .grcobject.business
                      %i.grcicon-process
                    Process
                  %td
                    .grcobject.business
                      %i.grcicon-system
                    System
              %table.objecticons
                %tr
                  %th{ 'colspan': '2' }
                    Risk Objects
                    %i (.risk)
                %tr
                  %td
                    .grcobject.risk
                      %i.grcicon-risk
                    Risk
                  %td
                    .grcobject.risk
                      %i.grcicon-attribute
                    Attribute
              %br
              %p
                Object icons are created with a help of another wrapper class around standard icon:
                %textarea
                  .grcobject.programs
                    %i.grcicon-program

        %section#icons.widget
          %section.header
            %h2
              Icons
          %section.content
            .real-example
              .btn.btn-add
                %i.grcicon-add
              .btn.btn-add
                %i.grcicon-admin
              .btn.btn-add
                %i.grcicon-dashboard
              .btn.btn-add
                %i.grcicon-demo
              .btn.btn-add
                %i.grcicon-desktop
              .btn.btn-add
                %i.grcicon-help
              .btn.btn-add
                %i.grcicon-logout
              .btn.btn-add
                %i.grcicon-normal
              .btn.btn-add
                %i.grcicon-user
              .btn.btn-add
                %i.grcicon-wide
              .btn.btn-add
                %i.grcicon-search-circle
              .btn.btn-add
                %i.grcicon-edit-white
              .btn.btn-add
                %i.grcicon-audit-white
              .btn.btn-add
                %i.grcicon-reg-map-white
              .btn.btn-add
                %i.grcicon-imp-exp-white
              .btn.btn-add
                %i.grcicon-export-white
              .btn.btn-add
                %i.grcicon-goto-white
              .btn.btn-add
                %i.grcicon-search-white
              .btn.btn-add
                %i.grcicon-carot-white
              .btn.btn-add
                %i.grcicon-demo-stop-white
              .btn.btn-add
                %i.grcicon-goto-left-white
              .btn.btn-add
                %i.grcicon-link-white
              .btn.btn-add
                %i.grcicon-x-white
              .btn.btn-add
                %i.grcicon-check-white
              .btn.btn-add
                %i.grcicon-comment-white
            .real-example
              .btn.btn-add
                %i.grcicon-add-black
              .btn.btn-add
                %i.grcicon-admin-black
              .btn.btn-add
                %i.grcicon-dashboard-black
              .btn.btn-add
                %i.grcicon-demo-black
              .btn.btn-add
                %i.grcicon-desktop-black
              .btn.btn-add
                %i.grcicon-help-black
              .btn.btn-add
                %i.grcicon-logout-black
              .btn.btn-add
                %i.grcicon-normal-black
              .btn.btn-add
                %i.grcicon-user-black
              .btn.btn-add
                %i.grcicon-wide-black
              .btn.btn-add
                %i.grcicon-search-black
              .btn.btn-add
                %i.grcicon-edit
              .btn.btn-add
                %i.grcicon-audit
              .btn.btn-add
                %i.grcicon-reg-map
              .btn.btn-add
                %i.grcicon-imp-exp
              .btn.btn-add
                %i.grcicon-export
              .btn.btn-add
                %i.grcicon-goto
              .btn.btn-add
                %i.grcicon-search
              .btn.btn-add
                %i.grcicon-carot
              .btn.btn-add
                %i.grcicon-demo-stop
              .btn.btn-add
                %i.grcicon-goto-left
              .btn.btn-add
                %i.grcicon-link
              .btn.btn-add
                %i.grcicon-x-grey
              .btn.btn
                %i.grcicon-check-green
              .btn.btn-add
                %i.grcicon-comment
            .real-example
              .btn
                %i.grcicon-ok
              .btn.btn-add
                %i.grcicon-process
              .btn.btn-add
                %i.grcicon-system
              .btn.btn-add
                %i.grcicon-document
              .btn.btn-add
                %i.grcicon-populationsample
              .btn.btn-add
                %i.grcicon-calendar
              .btn.btn-add
                %i.grcicon-remove
              .btn.btn-add
                %i.grcicon-edit-grey
              .btn.btn-add
                %i.grcicon-chevron-right
              .btn
                %i.grcicon-people-warning
              .btn
                %i.grcicon-eye-inprogress
              .btn
                %i.grcicon-eye-completed
              .btn
                %i.grcicon-eye-danger
            .real-example
              %p
                %strong
                  Object icons:
              .btn.btn-add
                %i.grcicon-program
              .btn.btn-add
                %i.grcicon-contract
              .btn.btn-add
                %i.grcicon-policy
              .btn.btn-add
                %i.grcicon-regulation
              .btn.btn-add
                %i.grcicon-section
              .btn.btn-add
                %i.grcicon-market
              .btn.btn-add
                %i.grcicon-facility
              .btn.btn-add
                %i.grcicon-project
              .btn.btn-add
                %i.grcicon-product
              .btn.btn-add
                %i.grcicon-orggroup
              .btn.btn-add
                %i.grcicon-dataasset
              .btn.btn-add
                %i.grcicon-businessprocess
              .btn.btn-add
                %i.grcicon-system
              .btn.btn-add
                %i.grcicon-control
              .btn.btn-add
                %i.grcicon-risk
              .btn.btn-add
                %i.grcicon-attribute
              .btn.btn-add
                %i.grcicon-clause
            .real-example
              .btn.btn-add
                %i.grcicon-program-black
              .btn.btn-add
                %i.grcicon-contract-black
              .btn.btn-add
                %i.grcicon-policy-black
              .btn.btn-add
                %i.grcicon-regulation-black
              .btn.btn-add
                %i.grcicon-section-black
              .btn.btn-add
                %i.grcicon-market-black
              .btn.btn-add
                %i.grcicon-facility-black
              .btn.btn-add
                %i.grcicon-project-black
              .btn.btn-add
                %i.grcicon-product-black
              .btn.btn-add
                %i.grcicon-orggroup-black
              .btn.btn-add
                %i.grcicon-dataasset-black
              .btn.btn-add
                %i.grcicon-businessprocess-black
              .btn.btn-add
                %i.grcicon-system-black
              .btn.btn-add
                %i.grcicon-control-black
              .btn.btn-add
                %i.grcicon-risk-black
              .btn.btn-add
                %i.grcicon-attribute-black
              .btn.btn-add
                %i.grcicon-clause-black
            .real-example
              %p
                %strong
                  Object icons colored:
              .btn
                %i.grcicon-program-color
              .btn
                %i.grcicon-contract-color
              .btn
                %i.grcicon-policy-color
              .btn
                %i.grcicon-regulation-color
              .btn
                %i.grcicon-section-color
              .btn
                %i.grcicon-section-danger
              .btn
                %i.grcicon-market-color
              .btn
                %i.grcicon-facility-color
              .btn
                %i.grcicon-project-color
              .btn
                %i.grcicon-product-color
              .btn
                %i.grcicon-orggroup-color
              .btn
                %i.grcicon-dataasset-color
              .btn
                %i.grcicon-businessprocess-color
              .btn
                %i.grcicon-businessprocess-danger
              .btn
                %i.grcicon-system-color
              .btn
                %i.grcicon-system-danger
              .btn
                %i.grcicon-control-color
              .btn
                %i.grcicon-control-danger
              .btn
                %i.grcicon-risk-color
              .btn
                %i.grcicon-attribute-color
              .btn
                %i.grcicon-clause-color
              .btn
                %i.grcicon-clause-danger
            %p
              %strong Example:
            %textarea
              %i.grcicon-add
              %i.grcicon-admin
              %i.grcicon-dashboard
              %i.grcicon-demo
              %i.grcicon-desktop
              %i.grcicon-help
              %i.grcicon-logout
              %i.grcicon-normal
              %i.grcicon-user
              %i.grcicon-wide
              %i.grcicon-search-circle
              %i.grcicon-edit-white
              %i.grcicon-add-black
              %i.grcicon-admin-black
              %i.grcicon-dashboard-black
              %i.grcicon-demo-black
              %i.grcicon-desktop-black
              %i.grcicon-help-black
              %i.grcicon-logout-black
              %i.grcicon-normal-black
              %i.grcicon-user-black
              %i.grcicon-wide-black
              %i.grcicon-search-black
              %i.grcicon-edit
              %i.grcicon-audit-white
              %i.grcicon-audit
              %i.grcicon-reg-map-white
              %i.grcicon-reg-map
              %i.grcicon-imp-exp-white
              %i.grcicon-imp-exp
              %i.grcicon-export-white
              %i.grcicon-export
              %i.grcicon-goto-white
              %i.grcicon-goto
              %i.grcicon-search-white
              %i.grcicon-search
              %i.grcicon-carot-white
              %i.grcicon-carot
              %i.grcicon-demo-stop-white
              %i.grcicon-demo-stop
              %i.grcicon-goto-left-white
              %i.grcicon-goto-left
              %i.grcicon-link-white
              %i.grcicon-link
              %i.grcicon-x-grey-white
              %i.grcicon-x-white
              %i.grcicon-check-white
              %i.grcicon-check-green
              %i.grcicon-comment-white
              %i.grcicon-comment
              %i.grcicon-ok
              %i.grcicon-process
              %i.grcicon-system
              %i.grcicon-document
              %i.grcicon-populationsample
              %i.grcicon-calendar
              %i.grcicon-remove
              %i.grcicon-edit-grey
              %i.grcicon-chevron-right
              %i.grcicon-people-warning
              %i.grcicon-eye-inprogress
              %i.grcicon-eye-completed
              %i.grcicon-eye-danger
              %i.grcicon-program
              %i.grcicon-contract
              %i.grcicon-policy
              %i.grcicon-regulation
              %i.grcicon-section
              %i.grcicon-market
              %i.grcicon-facility
              %i.grcicon-project
              %i.grcicon-product
              %i.grcicon-orggroup
              %i.grcicon-dataasset
              %i.grcicon-businessprocess
              %i.grcicon-system
              %i.grcicon-control
              %i.grcicon-risk
              %i.grcicon-attribute
              %i.grcicon-clause
              %i.grcicon-program-black
              %i.grcicon-contract-black
              %i.grcicon-policy-black
              %i.grcicon-regulation-black
              %i.grcicon-section-black
              %i.grcicon-market-black
              %i.grcicon-facility-black
              %i.grcicon-project-black
              %i.grcicon-product-black
              %i.grcicon-orggroup-black
              %i.grcicon-dataasset-black
              %i.grcicon-businessprocess-black
              %i.grcicon-system-black
              %i.grcicon-control-black
              %i.grcicon-risk-black
              %i.grcicon-attribute-black
              %i.grcicon-clause-black
              %i.grcicon-program-color
              %i.grcicon-contract-color
              %i.grcicon-policy-color
              %i.grcicon-regulation-color
              %i.grcicon-section-color
              %i.grcicon-section-danger
              %i.grcicon-market-color
              %i.grcicon-facility-color
              %i.grcicon-project-color
              %i.grcicon-product-color
              %i.grcicon-orggroup-color
              %i.grcicon-dataasset-color
              %i.grcicon-businessprocess-color
              %i.grcicon-businessprocess-danger
              %i.grcicon-system-color
              %i.grcicon-system-danger
              %i.grcicon-control-color
              %i.grcicon-control-danger
              %i.grcicon-risk-color
              %i.grcicon-attribute-color
              %i.grcicon-clause-color
              %i.grcicon-clause-danger
            %p
              %span.label.label-info
                Note!
              &nbsp; As you can see on real example there is green button surrounding icons. That is just for example purpose so you can see white icons also.

        %section#list.widget
          %section.header
            %h2
              Improved tree list with variable options
          %section.content
            %ul.tree-structure
              %li
                .item-main
                  .openclose
                  .item-title
                    .row-fluid
                      .span8
                        .oneline.expand-on-hover{ 'rel': 'tooltip', 'title': 'click to view more' }
                          %span.title
                            .grcobject.governance
                              %i.grcicon-program
                            Lorem ipsum dolor sit amet
                            %i.description-inline
                              Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                        .note
                          %a.note-trigger{ 'href': '#' }
                            %i.grcicon-add-black
                            Abstract/Note
                          .note-text
                            %textarea
                            %a.btn.btn-mini.btn-add{ 'href': '#' }
                              %i.grcicon-check-white
                              Save
                              %a.cancel-link{ 'href': '#' }
                                Cancel
                          .note-content
                            %a{ 'href': '#' }
                              %i.grcicon-edit
                            .rtf
                              Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                              consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro.
                              %span
                                by Admin, 2013-02-18 5:35PM
                        .description
                          .rtf
                            Lorem
                            %strong
                              ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor libero,
                            %em
                              convallis eget congue quis, fringilla eget mi.
                            Maecenas dignissim tempus adipiscing.
                            %ul
                              %li
                                ipsum dolor sit amet
                              %li
                                consectetur adipiscing elit
                              %li
                                tortor libero convallis
                              %li
                                maecenas dignissim tempus adipiscing
                            %strong
                              %em
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor libero, convallis eget congue quis, fringilla eget mi. Maecenas dignissim tempus adipiscing.
                            %ol
                              %li
                                ipsum dolor sit amet
                              %li
                                consectetur adipiscing elit
                              %li
                                tortor libero convallis
                              %li
                                maecenas dignissim tempus adipiscing
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor libero, convallis eget congue quis, fringilla eget mi. Maecenas dignissim tempus adipiscing.
                      .span1
                        %a.view-more{ 'href': '#' }
                          view
                      .objects-count
                        %a{ 'href': '#' }
                          %i.grcicon-control-black
                          5
                        %a{ 'href': '#' }
                          %i.grcicon-section-black
                          0
                    .item-actions
                      %a{ 'href': '#', 'class': 'btn btn-mini' }
                        %i.grcicon-goto
                      %a{ 'href': '#', 'class': 'btn btn-mini' }
                        %i.grcicon-link
                .item-content
                  %ul.tree-structure
                    %li
                      .item-main
                        .openclose
                        .item-title
                          .row-fluid
                            .span8
                              .oneline.expand-on-hover{ 'rel': 'tooltip', 'title': 'click to view more' }
                                %span.title
                                  %i.grcicon-comment
                                  Lorem ipsum dolor sit amet
                                %span.code
                                  %i.grcicon-section-black
                                  DEEP2
                                %span.description-inline
                                  %i.description-inline
                                    Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                              .description
                                .rtf
                                  Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                            .span1
                              %a.view-more{ 'href': '#' }
                                view
                            .objects-count
                              %a{ 'href': '#' }
                                %i.grcicon-control-black
                                5
                              %a{ 'href': '#' }
                                %i.grcicon-section-black
                                0
                          .item-actions
                            %a{ 'href': '#', 'class': 'btn btn-mini' }
                              %i.grcicon-goto
                            %a{ 'href': '#', 'class': 'btn btn-mini' }
                              %i.grcicon-link
                      .item-content
                        %ul.tree-structure
                          %li
                            .item-main
                              .openclose
                              .item-title
                                .row-fluid
                                  .span8
                                    .oneline.expand-on-hover{ 'rel': 'tooltip', 'title': 'click to view more' }
                                      %span.title
                                        Lorem ipsum dolor sit amet 3
                                      %span.code
                                        %i.grcicon-section-black
                                        DEEP3
                                      %span.description-inline
                                        %i.description-inline
                                          consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident
                                    .description
                                      .rtf
                                        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                                  .span1
                                    %a.view-more{ 'href': '#' }
                                      view
                                  .objects-count
                                    %a{ 'href': '#' }
                                      %i.grcicon-control-black
                                      5
                                    %a{ 'href': '#' }
                                      %i.grcicon-section-black
                                      0
                                .item-actions
                                  %a{ 'href': '#', 'class': 'btn btn-mini' }
                                    %i.grcicon-goto
                                  %a{ 'href': '#', 'class': 'btn btn-mini' }
                                    %i.grcicon-link
                            .item-content
                              %ul.tree-structure
                                %li
                                  .item-main
                                    .openclose.lastchild
                                    .item-title
                                      .row-fluid
                                        .span9
                                          .oneline.expandable
                                            %span.title
                                              %i.grcicon-comment
                                              Just a title
                                            %span.code
                                              %i.grcicon-control-black
                                              CTR1
                                        .objects-count
                                          %a{ 'href': '#' }
                                            %i.grcicon-control-black
                                            5
                                          %a{ 'href': '#' }
                                            %i.grcicon-section-black
                                            0
                                      .item-actions
                                        %a{ 'href': '#', 'class': 'btn btn-mini' }
                                          %i.grcicon-goto
                                        %a{ 'href': '#', 'class': 'btn btn-mini' }
                                          %i.grcicon-link
                                  .item-content
                                %li
                                  .item-main
                                    .openclose.lastchild
                                    .item-title
                                      .row-fluid
                                        .span8
                                          .oneline.expand-on-hover{ 'rel': 'tooltip', 'title': 'click to view more' }
                                            %span.title
                                              Title with Description
                                            %span.code
                                              %i.grcicon-control-black
                                              CTR2
                                            %span.description-inline
                                              %i.description-inline
                                                consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident
                                          .description
                                            .rtf
                                              consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                                        .span1
                                          %a.view-more{ 'href': '#' }
                                            view
                                        .objects-count
                                          %a{ 'href': '#' }
                                            %i.grcicon-control-black
                                            5
                                          %a{ 'href': '#' }
                                            %i.grcicon-section-black
                                            0
                                      .item-actions
                                        %a{ 'href': '#', 'class': 'btn btn-mini' }
                                          %i.grcicon-goto
                                        %a{ 'href': '#', 'class': 'btn btn-mini' }
                                          %i.grcicon-link
                                  .item-content
                                %li
                                  .item-main
                                    .openclose.lastchild
                                    .item-title
                                      .row-fluid
                                        .span8
                                          .oneline.expand-on-hover{ 'rel': 'tooltip', 'title': 'click to view more' }
                                            %span.title
                                              %i.grcicon-comment
                                              Title with Description
                                            %span.code
                                              %i.grcicon-control-black
                                              CTR3
                                            %span.description-inline
                                              %i.description-inline
                                                consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident
                                          .description
                                            .rtf
                                              consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                                        .span1
                                          %a.view-more{ 'href': '#' }
                                            view
                                        .objects-count
                                          %a{ 'href': '#' }
                                            %i.grcicon-control-black
                                            5
                                          %a{ 'href': '#' }
                                            %i.grcicon-section-black
                                            0
                                      .item-actions
                                        %a{ 'href': '#', 'class': 'btn btn-mini' }
                                          %i.grcicon-goto
                                        %a{ 'href': '#', 'class': 'btn btn-mini' }
                                          %i.grcicon-link
                                  .item-content
                          %li
                            .item-main
                              .openclose.lastchild
                              .item-title
                                .row-fluid
                                  .span9
                                    .oneline.expandable
                                      %span.title
                                        Title with no Description
                                      %span.code
                                        %i.grcicon-section-black
                                        DEEP3.1
                                  .objects-count
                                    %a{ 'href': '#' }
                                      %i.grcicon-control-black
                                      5
                                    %a{ 'href': '#' }
                                      %i.grcicon-section-black
                                      0
                                .item-actions
                                  %a{ 'href': '#', 'class': 'btn btn-mini' }
                                    %i.grcicon-goto
                                  %a{ 'href': '#', 'class': 'btn btn-mini' }
                                    %i.grcicon-link
                            .item-content
                    %li
                      .item-main
                        .openclose.lastchild
                        .item-title
                          .row-fluid
                            .span9
                              .oneline.expandable
                                %span.title
                                  Title with no Description
                                %span.code
                                  %i.grcicon-section-black
                                  DEEP2.1
                            .objects-count
                              %a{ 'href': '#' }
                                %i.grcicon-control-black
                                5
                              %a{ 'href': '#' }
                                %i.grcicon-section-black
                                0
                          .item-actions
                            %a{ 'href': '#', 'class': 'btn btn-mini' }
                              %i.grcicon-goto
                            %a{ 'href': '#', 'class': 'btn btn-mini' }
                              %i.grcicon-link
                      .item-content
              %li
                .item-main
                  .openclose.lastchild
                  .item-title
                    .row-fluid
                      .span9
                        .oneline.expandable
                          %span.title
                            Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                          %span.code
                            .grcobject.risk
                              %i.grcicon-risk
                            RISKYATTR333
                      .objects-count
                        %a{ 'href': '#' }
                          %i.grcicon-control-black
                          5
                        %a{ 'href': '#' }
                          %i.grcicon-section-black
                          0
                    .item-actions
                      %a{ 'href': '#', 'class': 'btn btn-mini' }
                        %i.grcicon-goto
                      %a{ 'href': '#', 'class': 'btn btn-mini' }
                        %i.grcicon-link
                .item-content
              %li
                .item-main
                  .openclose
                  .item-title
                    .row-fluid
                      .span8
                        .oneline.description-only.expand-on-hover{ 'rel': 'tooltip', 'title': 'click to view more' }
                          %span.title
                          %span.code
                            .grcobject.compliance
                              %i.grcicon-system
                            SYS444
                          %span.description-inline
                            %i.description-inline
                              consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                        .description.inhover
                          %span.code
                            SYS444
                          .rtf
                            consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                            consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                      .span1
                        %a.view-more{ 'href': '#' }
                          view
                      .objects-count
                        %a{ 'href': '#' }
                          %i.grcicon-control-black
                          5
                        %a{ 'href': '#' }
                          %i.grcicon-section-black
                          0
                    .item-actions
                      %a{ 'href': '#', 'class': 'btn btn-mini' }
                        %i.grcicon-goto
                      %a{ 'href': '#', 'class': 'btn btn-mini' }
                        %i.grcicon-link
                .item-content
                  %ul.tree-structure
                    %li
                      .item-main
                        .openclose
                        .item-title
                          .row-fluid
                            .span8
                              .oneline.expand-on-hover{ 'rel': 'tooltip', 'title': 'click to view more' }
                                %span.title
                                  Lorem ipsum dolor sit amet
                                %span.code
                                  DEEP1
                                %span.description-inline
                                  %i.description-inline
                                    consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                              .description
                                .rtf
                                  consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            .span1
                              %a.view-more{ 'href': '#' }
                                view
                            .objects-count
                              %a{ 'href': '#' }
                                %i.grcicon-control-black
                                5
                              %a{ 'href': '#' }
                                %i.grcicon-section-black
                                0
                          .item-actions
                            %a{ 'href': '#', 'class': 'btn btn-mini' }
                              %i.grcicon-goto
                            %a{ 'href': '#', 'class': 'btn btn-mini' }
                              %i.grcicon-link
                      .item-content
                        %ul.tree-structure
                          %li
                            .item-main
                              .openclose.lastchild
                              .item-title
                                .row-fluid
                                  .span8
                                    .oneline.expandable.description-only
                                      %span.title
                                      %span.code
                                        DEEP2
                                      %span.description-inline
                                        %i.description-inline
                                          consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                                    .description.inhover
                                      %span.code
                                        DEEP1
                                      .rtf
                                        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                  .span1
                                    %a.view-more{ 'href': '#' }
                                      view
                                  .objects-count
                                    %a{ 'href': '#' }
                                      %i.grcicon-control-black
                                      5
                                    %a{ 'href': '#' }
                                      %i.grcicon-section-black
                                      0
                                .item-actions
                                  %a{ 'href': '#', 'class': 'btn btn-mini' }
                                    %i.grcicon-goto
                                  %a{ 'href': '#', 'class': 'btn btn-mini' }
                                    %i.grcicon-link
                            .item-content
                          %li
                            .item-main
                              .openclose.lastchild
                              .item-title
                                .row-fluid
                                  .span9
                                    .oneline.expandable.description-only
                                      %span.title
                                        No Title or Description (shouldn't happen)
                                  .objects-count
                                    %a{ 'href': '#' }
                                      %i.grcicon-control-black
                                      5
                                    %a{ 'href': '#' }
                                      %i.grcicon-section-black
                                      0

        %section#nesting.widget
          %section.header
            %h2
              Structure nesting
          %section.content
            .nesting-example.real-example
              .row-fluid
                .span12
                  Fluid 12
                  .row-fluid
                    .span6
                      Fluid 6
                      .row-fluid
                        .span3
                          Fluid 3
                        .span9
                          Fluid 9
                    .span6
                      Fluid 6
                      .row-fluid
                        .span3
                          Fluid 3
                        .span3
                          Fluid 3
                        .span3
                          Fluid 3
                        .span3
                          Fluid 3
            %p
              %strong
                Example:
            %textarea
              .row-fluid
                .span12
                  Fluid 12
                  .row-fluid
                    .span6
                      Fluid 6
                      .row-fluid
                        .span3
                          Fluid 3
                        .span9
                          Fluid 9
                    .span6
                      Fluid 6
                      .row-fluid
                        .span3
                          Fluid 3
                        .span3
                          Fluid 3
                        .span3
                          Fluid 3
                        .span3
                          Fluid 3
            %p
              %span.label.label-info
                Note!
              &nbsp; This is how nesting work. If you forgot to implement something or you put some element into wrong place it will not work properly.
              Each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.

        %section#buttons.widget
          %section.header
            %h2
              Buttons
          %section.content
            %p
              %strong
                Button styles:
            .real-example
              .btn
                Default
              .btn.btn-primary
                Primary
              .btn.btn-info
                Info
              .btn.btn-add
                Add
              .btn.btn-warning
                Warning
              .btn.btn-danger
                Danger
              .btn.btn-inverse
                Inverse
            %p
              %strong
                Button sizes:
            .real-example
              .btn.btn-large.disabled
                Large Button
              .btn
                Default Button
              .btn.btn-small
                Small Button
              .btn.btn-mini
                Mini Button
            %p
              %strong
                Pending AJAX:
            .real-example
              .btn.btn-large.pending-ajax
                Large Button - Default
              .btn.btn-add.pending-ajax
                Default Button - Add
              .btn.btn-small.btn-warning.pending-ajax
                Small Button - Warning
              .btn.btn-mini.btn-danger.pending-ajax
                Mini Button - Danger
            %p
              %span.label.label-info
                Note!
              &nbsp; When you add class
              %strong
                \.pending-ajax 
              all buttons will look like default and disabled, no matter what other classes they have. Only classes for size will work.
            %p
              %strong
                Disabled:
            .real-example
              .btn.btn-large.disabled
                Large Button - Default
              .btn.btn-add.disabled
                Default Button - Add
              .btn.btn-small.btn-warning.disabled
                Small Button - Warning
              .btn.btn-mini.btn-danger.disabled
                Mini Button - Danger
            %p
              %span.label.label-info
                Note!
              &nbsp; When you add class
              %strong .disabled 
              all buttons will be disabled.
            %p
              %strong
                Example:
            %textarea
              Types:
              .btn
                Default
              .btn.btn-primary
                Primary
              .btn.btn-info
                Info
              .btn.btn-add
                Add
              .btn.btn-warning
                Warning
              .btn.btn-danger
                Danger
              .btn.btn-inverse
                Inverse
              Sizes:
              .btn.btn-large.disabled
                Large Button
              .btn
                Default Button
              .btn.btn-small
                Small Button
              .btn.btn-mini
                Mini Button
              Pending AJAX:
              .btn.btn-large.pending-ajax
                Large Button - Default
              .btn.btn-add.pending-ajax
                Default Button - Add 
              .btn.btn-small.btn-warning.pending-ajax
                Small Button - Warning
              .btn.btn-mini.btn-danger.pending-ajax
                Mini Button - Danger
              Disabled:
              .btn.btn-large.disabled
                Large Button - Default
              .btn.btn-add.disabled
                Default Button - Add 
              .btn.btn-small.btn-warning.disabled
                Small Button - Warning
              .btn.btn-mini.btn-danger.disabled
                Mini Button - Danger

        %section#progress.widget
          %section.header
            %h2
              Progress Bar
          %section.content
            .real-example
              .progress
                .bar{ 'style': 'width:30%;' }
              .progress
                .bar.bar-success{ 'style': 'width:40%;' }
              .progress
                .bar.bar-danger{ 'style': 'width:50%;' }
              .progress
                .bar.bar-warning{ 'style': 'width:60%;' }
            %p
              %strong
                Example:
            %textarea
              .progress
                .bar{ 'style': 'width:30%;' }
              .progress
                .bar.bar-success{ 'style': 'width:40%;' }
              .progress
                .bar.bar-danger{ 'style': 'width:50%;' }
              .progress
                .bar.bar-warning{ 'style': 'width:60%;' }
            .real-example
              %p
                %strong
                  You can also combine multiple progress bars into one row. See example below:
              .progress
                .bar{ 'style': 'width:25%;' }
                .bar.bar-success{ 'style': 'width:25%;' }
                .bar.bar-danger{ 'style': 'width:25%;' }
                .bar.bar-warning{ 'style': 'width:25%;' }
            %textarea
              .progress
                .bar{ 'style': 'width:25%;' }
                .bar.bar-success{ 'style': 'width:25%;' }
                .bar.bar-danger{ 'style': 'width:25%;' }
                .bar.bar-warning{ 'style': 'width:25%;' }
            %p
              %span.label.label-info
                Note!
              &nbsp; When you're adding progress bars please note that instead of
              %strong
                'style': 'width:20%;' 
              you should import code that will calculate required percentage. This percentages are only for demonstration.

        %section#actions.widget
          %section.header
            %h2
              Actions List
          %section.content
            .real-example.clearfix
              %ul.actions.pull-right
                %li
                  %a{ 'href': '#' }
                    %i.grcicon-edit
                    Edit Program
                %li.btn-group
                  %a.dropdown-toggle{ 'href': '#', 'data-toggle': 'dropdown' }
                    %i.grcicon-imp-exp
                    Import/Export
                    %span.caret
                  %ul.dropdown-menu
                    %li.divider
                    %li
                      %a{ 'href': '#' }
                        Import Regs
                    %li
                      %a{ 'href': '#' }
                        Import Controls
                    %li.divider
                    %li
                      %a{ 'href': '#' }
                        Export Regs
                    %li
                      %a{ 'href': '#' }
                        Export Controls
                %li
                  %a{ 'href': '#' }
                    %i.grcicon-reg-map
                    Reg Mapper
                %li
                  %a{ 'href': '#' }
                    %i.grcicon-audit
                    Start Audit
            %p
              %strong
                Example:
            %textarea
              %ul.actions.pull-right
                %li
                  %a{ 'href': '#' }
                    %i.grcicon-edit-new
                    Edit Program
                %li.btn-group
                  %a.dropdown-toggle{ 'href': '#', 'data-toggle': 'dropdown' }
                    %i.grcicon-imp-exp
                    Import/Export
                    %span.caret
                  %ul.dropdown-menu
                    %li.divider
                    %li
                      %a{ 'href': '#' }
                        Import Regs
                    %li
                      %a{ 'href': '#' }
                        Import Controls
                    %li.divider
                    %li
                      %a{ 'href': '#' }
                        Export Regs
                    %li
                      %a{ 'href': '#' }
                        Export Controls
                %li
                  %a{ 'href': '#' }
                    %i.grcicon-reg-map
                    Reg Mapper
                %li
                  %a{ 'href': '#' }
                    %i.grcicon-audit
                    Start Audit
            %p
              %span.label.label-info
                Note!
              &nbsp; You can combine every icon you want and insert any text you want. Also it this example we added dropdown list.

        %section#widgets.widget
          %section.header
            %h2
              Widgets
          %section.content
            %p
              Examples of proper widget implementation. Every widget that is correspond to some widget group have additional class. Those classes are:
            %ul
              %li
                %strong .programs
              %li
                %strong .governance
              %li
                %strong .risk
              %li
                %strong .business 
            %p
              If widget have left tabs structure like examples below it needs additional class
              %strong .widget-tabs
            %p
              On widget hover you can see 3 dots left from widget title. That 3 dots 'tells' user that he can drag/drop widget.
            %p
              Also left from widget title you can see icons. Those icons correspond to specific group.
            %p
              On the right from widget title you can see 3 icons. Help (always visible), close (it is shown only on widgets that are made by user) and contract/expand (also always visible). Contract/expand function is to contract or expand whole widget, leaving only widget header (title) and widget filter (search) sections.
            .row-fluid
              .span8

                -# PROGRAMS
                %section{ 'class': 'widget widget-tabs programs' }
                  %header.header
                    .row-fluid
                      .span8
                        %h2
                          Programs
                      .span4
                        .widget-action.pull-right.widget-showhide
                          %a.active{ 'href': '#', 'rel': 'tooltip', 'title': 'Contract widget', 'data-placement': 'top' }
                        .widget-action.pull-right.widget-action-help
                          %a{ 'href': '#', 'rel': 'tooltip', 'title': 'Help', 'data-placement': 'left' }
                            %i.grcicon-help
                  %section.content
                    .filter
                      .row-fluid
                        .span8
                          %input.ui-corner-all.widgetsearch.clear-value{ 'type': 'text', 'placeholder': 'Search' }
                        .span4
                          %a{ 'href': '#', 'class': 'btn btn-add pull-right' }
                            %i.grcicon-add
                            Program
                    %ul.tree-structure.simple.single-row-tabs
                      %li.program
                        %a{ 'href': "#" }
                          .row-fluid
                            .span11
                              .item-identifier
                                %span.title
                                  Company Controls
                                %i.grcicon-control-color
                                %span.code
                                  %span.text-governance
                                    CCPROGRAM-0005
                      %li.program
                        %a{ 'href': "#" }
                          .row-fluid
                            .span11
                              .item-identifier
                                %span.title
                                  Test Program
                                %i.grcicon-program-color
                                %span.code
                                  %span
                                    PROGRAM-0006
                            .span1
                              .objects-count.pull-right
                                %i.grcicon-eye-inprogress
                      %li.program
                        %a{ 'href': "#" }
                          .row-fluid
                            .span11
                              .item-identifier
                                %span.title
                                  New Program K1
                                %i.grcicon-program-color
                                %span.code
                                  %span
                                    PROGRAM-J1
                            .span1
                              .objects-count.pull-right
                                %i.grcicon-eye-completed
                      %li.program
                        %a{ 'href': "#" }
                          .row-fluid
                            .span11
                              .item-identifier
                                %span.title
                                  Interactive
                                %i.grcicon-program-color
                                %span.code
                                  %span
                                    PRG.11
                            .span1
                              .objects-count.pull-right
                                %i.grcicon-eye-danger

            .row-fluid
              .span8
                %section{ 'class': 'widget widget-tabs governance', 'style': 'height:280px' }
                  %header.header
                    .row-fluid
                      .span8
                        %h2
                          Governance
                      .span4
                        .widget-action.pull-right.widget-showhide
                          %a.active{ 'href': '#', 'rel': 'tooltip', 'title': 'Contract widget', 'data-placement': 'top' }
                        .widget-action.pull-right.widget-action-help
                          %a{ 'href': '#', 'rel': 'tooltip', 'title': 'Help', 'data-placement': 'left' }
                            %i.grcicon-help
                  %section.content
                    .filter
                      .row-fluid
                        .span8
                          %input.ui-corner-all.widgetsearch.clear-value{ 'type': 'text', 'placeholder': 'Search' }
                        .span4
                          %a{ 'href': '#', 'class': 'btn btn-add pull-right' }
                            %i.grcicon-add
                            Regulation
                    .tabbable.tabs-left
                      %ul.nav.nav-tabs
                        %li.active
                          %a{ 'href': '#regulations', 'data-toggle': 'tab' }
                            %i.grcicon-regulation-color
                            %span.text-governance
                              Regulations
                            %span.item-count
                              39
                        %li
                          %a{ 'href': '#policies', 'data-toggle': 'tab' }
                            %i.grcicon-policy-color
                            %span.text-governance
                              Policies
                            %span.item-count
                              2
                        %li
                          %a{ 'href': '#contracts', 'data-toggle': 'tab' }
                            %i.grcicon-contract-color
                            %span.text-governance
                              Contracts
                            %span.item-count
                              13
                        %li
                          %a{ 'href': '#controls', 'data-toggle': 'tab' }
                            %i.grcicon-control-color
                            %span.text-governance
                              Controls
                            %span.item-count
                              285
                      .tab-content
                        #regulations.tab-pane.active
                          %ul.tree-structure.simple.single-row-tabs
                            %li.directive
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Regulation 5
                                      %span.code
                                        REG5
                            %li.directive
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Regulation 6
                                      %span.code
                                        REG6
                            %li.directive
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Regulation 7
                                      %span.code
                                        REG7
                            %li.directive
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Regulation 8
                                      %span.code
                                        REG8
                        #policies.tab-pane
                          %ul.tree-structure.simple.single-row-tabs
                            %li.directive
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Policy 1
                                      %span.code
                                        POLICY-X
                            %li.directive
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        User Agreement Policy
                                      %span.code
                                        UAP-V1
                            %li.directive
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        User Agreement Policy Revised
                                      %span.code
                                        UAP-V1.1
                            %li.directive
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Google Global Privacy Policy
                                      %span.code
                                        GGPP-0
                        #contracts.tab-pane
                          %ul.tree-structure.simple.single-row-tabs
                            %li.directive
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Google Wallet Contract
                                      %span.code
                                        CONTRACT-GOOGLE-1
                        #controls.tab-pane
                          %ul.tree-structure.simple.single-row-tabs
                            %li.directive
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        End User Login Control
                                      %span.code
                                        RFEED-1
            .row-fluid
              .span8
                %section{ 'class': 'widget widget-tabs risk', 'style': 'height:200px' }
                  %header.header
                    .row-fluid
                      .span8
                        %h2
                          Risk
                      .span4
                        .widget-action.pull-right.widget-showhide
                          %a.active{ 'href': '#', 'rel': 'tooltip', 'title': 'Contract widget', 'data-placement': 'top' }
                        .widget-action.pull-right.widget-action-help
                          %a{ 'href': '#', 'rel': 'tooltip', 'title': 'Help', 'data-placement': 'left' }
                            %i.grcicon-help
                  %section.content
                    .filter
                      .row-fluid
                        .span8
                          %input.ui-corner-all.widgetsearch.clear-value{ 'type': 'text', 'placeholder': 'Search' }
                        .span4
                          %a{ 'href': '#', 'class': 'btn btn-add pull-right' }
                            %i.grcicon-add
                            Risk
                    .tabbable.tabs-left
                      %ul.nav.nav-tabs
                        %li.active
                          %a{ 'href': '#risks', 'data-toggle': 'tab' }
                            %i.grcicon-risk-color
                            %span.text-risk
                              Risks
                            %span.item-count
                              1
                        %li
                          %a{ 'href': '#attributes', 'data-toggle': 'tab' }
                            %i.grcicon-attribute-color
                            %span.text-risk
                              Attributes
                            %span.item-count
                              2
                      .tab-content
                        #risks.tab-pane.active
                          %ul.tree-structure.simple.single-row-tabs
                            %li.risk
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        User Login
                                      %span.code
                                        LOGIN
                        #attributes.tab-pane
                          %ul.tree-structure.simple.single-row-tabs
                            %li.risk
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Possible Fraud
                                      %span.code
                                        P1-FRAUD
                            %li.risk
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Identity Theft
                                      %span.code
                                        GWALLET-HIGH-PRIO
            .row-fluid
              .span8
                %section{ 'class': 'widget widget-tabs business', 'style': 'height:390px' }
                  %header.header
                    .row-fluid
                      .span8
                        %h2
                          %i.grcicon-product
                          Business
                      .span4
                        .widget-action.pull-right.widget-showhide
                          %a.active{ 'href': '#', 'rel': 'tooltip', 'title': 'Contract widget', 'data-placement': 'top' }
                        .widget-action.pull-right.widget-action-help
                          %a{ 'href': '#', 'rel': 'tooltip', 'title': 'Help', 'data-placement': 'left' }
                            %i.grcicon-help
                  %section.content
                    .filter
                      %input.ui-corner-all.widgetsearch.clear-value{ 'type': 'text', 'placeholder': 'Search' }
                    .tabbable.tabs-left
                      %ul.nav.nav-tabs
                        %li.active
                          %a{ 'href': '#systems', 'data-toggle': 'tab' }
                            %i.grcicon-system-color
                            %span.text-business
                              Systems
                            %span.item-count
                              1
                        %li
                          %a{ 'href': '#processes', 'data-toggle': 'tab' }
                            %i.grcicon-process-color
                            %span.text-business
                              Processes
                            %span.item-count
                              1
                        %li
                          %a{ 'href': '#products', 'data-toggle': 'tab' }
                            %i.grcicon-product-color
                            %span.text-business
                              Products
                            %span.item-count
                              1
                        %li
                          %a{ 'href': '#orggroups', 'data-toggle': 'tab' }
                            %i.grcicon-orggroup-color
                            %span.text-business
                              Org Groups
                            %span.item-count
                              1
                        %li
                          %a{ 'href': '#facilities', 'data-toggle': 'tab' }
                            %i.grcicon-facility-color
                            %span.text-business
                              Facilities
                            %span.item-count
                              1
                        %li
                          %a{ 'href': '#markets', 'data-toggle': 'tab' }
                            %i.grcicon-market-color
                            %span.text-business
                              Markets
                            %span.item-count
                              1
                        %li
                          %a{ 'href': '#dataassets', 'data-toggle': 'tab' }
                            %i.grcicon-dataasset-color
                            %span.text-business
                              Data Assets
                            %span.item-count
                              1
                        %li
                          %a{ 'href': '#projects', 'data-toggle': 'tab' }
                            %i.grcicon-project-color
                            %span.text-business
                              Projects
                            %span.item-count
                              1
                      .tab-content
                        .tab-pane{ 'id': 'systems', 'class': 'active' }
                          %ul.tree-structure.simple.single-row-tabs
                            %li.business
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Automated Support Email
                                      %span.code
                                        EML-000
                        .tab-pane{ 'id': 'processes' }
                          %ul.tree-structure.simple.single-row-tabs
                            %li.business
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Resolving Login Issues
                                      %span.code
                                        JR-APPROACH
                        .tab-pane{ 'id': 'products' }
                          %ul.tree-structure.simple.single-row-tabs
                            %li.business
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Google Wallet
                                      %span.code
                                        GW.1
                        .tab-pane{ 'id': 'orggroups' }
                          %ul.tree-structure.simple.single-row-tabs
                            %li.business
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Cloud Services
                                      %span.code
                                        CS-11229942-2013
                        .tab-pane{ 'id': 'facilities' }
                          %ul.tree-structure.simple.single-row-tabs
                            %li.business
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Mountain View
                                      %span.code
                                        GMTV
                        .tab-pane{ 'id': 'markets' }
                          %ul.tree-structure.simple.single-row-tabs
                            %li.business
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        China
                                      %span.code
                                        ASIA-CH
                        .tab-pane{ 'id': 'dataassets' }
                          %ul.tree-structure.simple.single-row-tabs
                            %li.business
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Github Repo Base
                                      %span.code
                                        ASSET-GRB
                        .tab-pane{ 'id': 'projects' }
                          %ul.tree-structure.simple.single-row-tabs
                            %li.business
                              %a{ 'href': '#' }
                                .row-fluid
                                  .span12
                                    .item-identifier
                                      %span.title
                                        Nexus 4 Marketing in Russia
                                      %span.code
                                        PROJECT-M1
        %section#flash-notice.widget
          %section.header
            %h2
              Flash notice
          %section.content
            .flash
              %a.close{ 'href': '#', 'data-dismiss': 'alert' }
                &times;
              .notice
                %p
                  %i.grcicon-ok
                  Requests are imported successfully!

        %section#popover.widget
          %section.header
            %h2
              Popovers
          %section.content
            -macro program_popover_title()
              .row-fluid
                .span10
                  %h3
                    %i.grcicon-program-color
                    %span.title Program Title
                    %span.code.governance PROGRAM-XXX
                .span2
                  %a.btn.btn-mini.btn-primary.pull-right{ 'href': '#', 'rel': 'tooltip', 'title': 'View Program' }
                    %i.grcicon-goto-white
            -endmacro
            -macro program_popover_content_inprogress()
              .popover-inner-content
                .row-fluid
                  .span12
                    %h4 Description
                    .rtf
                      %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                .row-fluid
                  .span6
                    %h4
                      Audit Status
                    %p.audit-status
                      %i.grcicon-eye-inprogress
                      %span.status.inprogress In Progress
                      %br
                      started on:
                      02/14/2013
                      %br
                      ends on:
                      02/31/2013
                      %br
                      %strong
                        report date:
                        04/01/2013
                  .span6
                    %h4
                      Controls (200)
                      .progress
                        .bar.bar-success{ 'style': 'width:50%', 'rel': 'tooltip', 'title': '100 Done' }
                          100
                        .bar.bar-danger{ 'style': 'width:35%', 'rel': 'tooltip', 'title': '70 N/A' }
                          70
                        .bar.bar-warning{ 'style': 'width:15%', 'rel': 'tooltip', 'title': '30 Pending' }
                          30
                    %h4
                      Directives (14)
                    %i.grcicon-regulation-color
                    8
                    &nbsp;
                    %i.grcicon-contract-color
                    2
                    &nbsp;
                    %i.grcicon-policy-color
                    4
            -endmacro
            -macro program_popover_content_none()
              .popover-inner-content
                .row-fluid
                  .span12
                    %h4 Description
                    .rtf
                      %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                .row-fluid
                  .span6
                    %h4
                      Audit Status
                    %p.audit-status
                      %span.status.none No scheduled audits
                  .span6
                    %h4
                      Controls (200)
                      .progress
                        .bar.bar-success{ 'style': 'width:50%', 'rel': 'tooltip', 'title': '100 Done' }
                          100
                        .bar.bar-danger{ 'style': 'width:35%', 'rel': 'tooltip', 'title': '70 N/A' }
                          70
                        .bar.bar-warning{ 'style': 'width:15%', 'rel': 'tooltip', 'title': '30 Pending' }
                          30
                    %h4
                      Directives (14)
                    %i.grcicon-regulation-color
                    8
                    &nbsp;
                    %i.grcicon-contract-color
                    2
                    &nbsp;
                    %i.grcicon-policy-color
                    4
            -endmacro
            -macro program_popover_content_danger()
              .popover-inner-content
                .row-fluid
                  .span12
                    %h4 Description
                    .rtf
                      %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                .row-fluid
                  .span6
                    %h4
                      Audit Status
                    %p.audit-status
                      %i.grcicon-eye-danger
                      %span.status.danger Overdue
                      %br
                      started on:
                      02/14/2013
                      %br
                      ends on:
                      02/31/2013
                      %br
                      %strong
                        report date:
                        04/01/2013
                  .span6
                    %h4
                      Controls (0)
                      .progress
                        .empty-progress No mapped controls
                    %h4
                      Directives (2)
                    %i.grcicon-regulation-color
                    1
                    &nbsp;
                    %i.grcicon-contract-color
                    1
            -endmacro
            -macro program_popover_content_completed()
              .popover-inner-content
                .row-fluid
                  .span12
                    %h4 Description
                    .rtf
                      %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                .row-fluid
                  .span6
                    %h4
                      Audit Status
                    %p.audit-status
                      %i.grcicon-eye-completed
                      %span.status.completed Completed
                      %br
                      started on:
                      02/14/2013
                      %br
                      ended on:
                      02/31/2013
                      %br
                      %strong
                        report date:
                        04/01/2013
                  .span6
                    %h4
                      Controls (0)
                      .progress
                        .empty-progress No mapped controls
                    %h4
                      Directives (2)
                    %i.grcicon-regulation-color
                    1
                    &nbsp;
                    %i.grcicon-contract-color
                    1
            -endmacro
            .row-fluid
              .span12

                // NEW POPOVER MACROS

                -macro new_popover_title(object_title,icon,slug)
                  .row-fluid
                    .span10
                      %h3
                        %i{ 'class': 'grcicon-={ icon }-color'}
                        %span.title {{ object_title }}
                    .span2
                      %a.btn.btn-mini.btn-primary.pull-right{ 'href': '#', 'rel': 'tooltip', 'title': 'View ={ icon }' }
                        %i.grcicon-goto-white
                -endmacro

                -macro controls_progressbar()
                  %h4
                    Controls (200)
                    .progress
                      .bar.bar-success{ 'style': 'width:50%', 'rel': 'tooltip', 'title': '100 Done' }
                        100
                      .bar.bar-danger{ 'style': 'width:35%', 'rel': 'tooltip', 'title': '70 N/A' }
                        70
                      .bar.bar-warning{ 'style': 'width:15%', 'rel': 'tooltip', 'title': '30 Pending' }
                        30
                -endmacro


                -macro new_popover_content(object)
                  .popover-inner-content
                    .row-fluid
                      .span12
                        %h4 Description
                        .rtf
                          %p
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                    -if object == 'program'
                      .row-fluid
                        .span6
                          %h4
                            Audit Status
                          %p.audit-status
                            %i.grcicon-eye-completed
                            %span.status.completed Completed
                            %br
                            started on:
                            02/14/2013
                            %br
                            ended on:
                            02/31/2013
                            %br
                            %strong
                              report date:
                              04/01/2013
                            %br
                            %br
                        .span6
                          {{ controls_progressbar() }}
                          %h4
                            Directives (14)
                          %i.grcicon-regulation-color
                          8
                          &nbsp;
                          %i.grcicon-contract-color
                          2
                          &nbsp;
                          %i.grcicon-policy-color
                          4
                    -elif object == 'contract'
                      .row-fluid
                        .span6
                          {{ controls_progressbar() }}
                        .span3
                          %h4
                            Clauses
                          %i.grcicon-clause-color
                          8
                        .span3
                          %h4
                            Programs
                          %i.grcicon-program-color
                          2
                    -elif object == 'policy'
                      .row-fluid
                        .span6
                          {{ controls_progressbar() }}
                        .span3
                          %h4
                            Sections
                          %i.grcicon-section-color
                          8
                        .span3
                          %h4
                            Programs
                          %i.grcicon-program-color
                          2
                    -elif object == 'regulation'
                      .row-fluid
                        .span6
                          {{ controls_progressbar() }}
                        .span3
                          %h4
                            Sections
                          %i.grcicon-section-color
                          8
                        .span3
                          %h4
                            Programs
                          %i.grcicon-program-color
                          2
                    -elif object == 'company_controls'
                      .row-fluid
                        .span12
                          {{ controls_progressbar() }}
                    -elif object == 'control'
                      .row-fluid
                        .span6
                          %h4
                            Directive Programs
                          %i.grcicon-program-color
                          8 
                        .span6
                          %h4
                            Company Control Programs
                          %i.grcicon-company_controls-color
                          1
                    -elif object == 'dataasset'
                      .row-fluid
                        .span6
                          %h4
                            Controls
                          %i.grcicon-control-color
                          8 
                        .span6
                          %h4
                            Programs
                          %i.grcicon-program-color
                          2
                    -elif object == 'market'
                      .row-fluid
                        .span6
                          %h4
                            Controls
                          %i.grcicon-control-color
                          8 
                        .span6
                          %h4
                            Programs
                          %i.grcicon-program-color
                          2
                    -elif object == 'facility'
                      .row-fluid
                        .span6
                          %h4
                            Controls
                          %i.grcicon-control-color
                          8 
                        .span6
                          %h4
                            Programs
                          %i.grcicon-program-color
                          2
                    -elif object == 'product'
                      .row-fluid
                        .span6
                          %h4
                            Controls
                          %i.grcicon-control-color
                          8 
                        .span6
                          %h4
                            Programs
                          %i.grcicon-program-color
                          2
                    -elif object == 'project'
                      .row-fluid
                        .span6
                          %h4
                            Controls
                          %i.grcicon-control-color
                          8 
                        .span6
                          %h4
                            Programs
                          %i.grcicon-program-color
                          2
                    -elif object == 'orggroup'
                      .row-fluid
                        .span6
                          %h4
                            Controls
                          %i.grcicon-control-color
                          8 
                        .span6
                          %h4
                            Programs
                          %i.grcicon-program-color
                          2
                    -elif object == 'process'
                      .row-fluid
                        .span6
                          {{ controls_progressbar() }}
                        .span6
                          %h4
                            Dependant Process/Systems
                          %i.grcicon-process-color
                          2
                          &nbsp;
                          %i.grcicon-system-color
                          2
                    -elif object == 'system'
                      .row-fluid
                        .span6
                          {{ controls_progressbar() }}
                        .span6
                          %h4
                            Dependant Process/Systems
                          %i.grcicon-process-color
                          2
                          &nbsp;
                          %i.grcicon-system-color
                          2



                    .row-fluid
                      .span6
                        %h4 Owner/Person of Contact
                        %a{ 'href': 'mailto:marshal.matters@gmail.com' }
                          %p.oneline
                            Marshal Matters
                      .span6
                        %h4
                          %strong.capitalize
                            {{ object }}
                          URL
                        %a{ 'href': '#' }
                          %p.oneline
                            http://gdrive.google.com/specs/documents/2013/something/something
                  .popoverfooter
                    .row-fluid
                      .span8
                        %p.smallcode
                          Code: CODE-XXX

                -endmacro

                // NEW POPOVER MACROS END


                %a{ 'href': 'javascript://', 'class': 'btn', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={ new_popover_title("Program Title", "program")|escape }', 'data-content': '={ new_popover_content("program")|escape }' }
                  Program
                %a{ 'href': 'javascript://', 'class': 'btn', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={ new_popover_title("Company Controls Title", "company_controls")|escape }', 'data-content': '={ new_popover_content("company_controls")|escape }' }
                  Company Controls Program
                %br
                %br
                %a{ 'href': 'javascript://', 'class': 'btn', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={new_popover_title("Policy Title", "policy")|escape}', 'data-content': '={ new_popover_content("policy")|escape }' }
                  Policy

                %a{ 'href': 'javascript://', 'class': 'btn', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={new_popover_title("Contract Title", "contract")|escape}', 'data-content': '={ new_popover_content("contract")|escape }' }
                  Contract

                %a{ 'href': 'javascript://', 'class': 'btn', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={new_popover_title("Regulation Title", "regulation")|escape}', 'data-content': '={ new_popover_content("regulation")|escape }' }
                  Regulation

                %a{ 'href': 'javascript://', 'class': 'btn', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={new_popover_title("Control Title", "control")|escape}', 'data-content': '={ new_popover_content("control")|escape }' }
                  Control
                %br
                %br
                %a{ 'href': 'javascript://', 'class': 'btn', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={new_popover_title("Data Asset Title", "dataasset")|escape}', 'data-content': '={ new_popover_content("dataasset")|escape }' }
                  Data Asset
                %a{ 'href': 'javascript://', 'class': 'btn', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={new_popover_title("Market Title", "market")|escape}', 'data-content': '={ new_popover_content("market")|escape }' }
                  Market
                %a{ 'href': 'javascript://', 'class': 'btn', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={new_popover_title("Facility Title", "facility")|escape}', 'data-content': '={ new_popover_content("facility")|escape }' }
                  Facility
                %a{ 'href': 'javascript://', 'class': 'btn', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={new_popover_title("Product Title", "product")|escape}', 'data-content': '={ new_popover_content("product")|escape }' }
                  Product
                %a{ 'href': 'javascript://', 'class': 'btn', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={new_popover_title("Project Title", "project")|escape}', 'data-content': '={ new_popover_content("project")|escape }' }
                  Project
                %a{ 'href': 'javascript://', 'class': 'btn', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={new_popover_title("Org Group Title", "orggroup")|escape}', 'data-content': '={ new_popover_content("orggroup")|escape }' }
                  Org Group
                %a{ 'href': 'javascript://', 'class': 'btn', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={new_popover_title("Process Title", "process")|escape}', 'data-content': '={ new_popover_content("process")|escape }' }
                  Process
                %a{ 'href': 'javascript://', 'class': 'btn', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={new_popover_title("System Title", "system")|escape}', 'data-content': '={ new_popover_content("system")|escape }' }
                  System
                %br
                %br
                %br
                %br

                %ul.tree-structure.simple.single-row-tabs
                  %li.program
                    %a{ 'href': '#', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={program_popover_title()|escape}', 'data-content': '={program_popover_content_none()|escape}' }
                      .row-fluid
                        .span11
                          .item-identifier
                            %i.grcicon-program-color
                            %span.title
                              No Scheduled Audits
                            %span.code
                              PROGRAM.001
                        .span1
                          .objects-count
                            &nbsp;
                  %li.program
                    %a{ 'href': '#', 'data-popover-trigger': 'sticky-hover', 'data-placement':  'right', 'data-original-title': '={program_popover_title()|escape}', 'data-content': '={program_popover_content_inprogress()|escape}' }
                      .row-fluid
                        .span11
                          .item-identifier
                            %i.grcicon-program-color
                            %span.title
                              Audit started or will start within 30 days
                            %span.code
                              PROGRAM.002
                        .span1
                          .objects-count.pull-right
                            %i.grcicon-eye-inprogress
                  %li.program
                    %a{ 'href': '#', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={program_popover_title()|escape}', 'data-content': '={program_popover_content_danger()|escape}' }
                      .row-fluid
                        .span11
                          .item-identifier
                            %i.grcicon-program-color
                            %span.title
                              Audit is 3 days or less from REPORT DATE
                            %span.code
                              PROGRAM.003
                        .span1
                          .objects-count.pull-right
                            %i.grcicon-eye-danger
                  %li.program
                    %a{ 'href': '#', 'data-popover-trigger': 'sticky-hover', 'data-placement': 'right', 'data-original-title': '={program_popover_title()|escape}', 'data-content': '={program_popover_content_completed()|escape}' }
                      .row-fluid
                        .span11
                          .item-identifier
                            %i.grcicon-program-color
                            %span.title
                              Program with completed audit (and next one is more than 30 days away)
                            %span.code
                              PROGRAM.003
                        .span1
                          .objects-count.pull-right
                            %i.grcicon-eye-completed












        %section#helper.widget
          %section.header
            %h2
              Helper classes
          %section.content
            %p
              %strong .pull-left -
              Float an element left
            %p
              %strong .pull-right -
              Float an element right
            %p
              %strong .oneline -
              Preventing content to go into multiple rows.
              <span class='label label-info'>Note!</span>
              That element needs to be block or inline-block element.
              %strong
                Please note that you should use mixin oneline when it's possible. Just in cases when you cannot use mixin add class to specific element.
            %p
              %strong .input-block-level -
              Add this class to input field that needs to have width of his parent.
            %p
              %strong .date -
              Add this class to input field that represent date field.
            %p
              %strong .centered -
              This class make text or inline elements centered relative on parent element.
            %p
              %strong
                Example:
            %textarea
              .pull-left
              .pull-right
              .oneline
              .input-block-level
              .date
              .centered

  -# Help Modal Empty
  #helpModalEmpty{ 'class': 'modal hide fade', 'tabindex': '-1' }
    .modal-header
      %a.btn.btn-mini.pull-right{ 'data-dismiss': 'modal', 'href': '#' }
        %i.grcicon-x-grey
      %a.btn.btn-mini.pull-right.help-edit{ 'href': '#' }
        %i.grcicon-edit
      %h2
        %span
          Help Title
    .modal-body
      .help
        %h2.centered
          There is no content available for this topic.
        %p.centered
          Enter help title and content below:
        -#.help-content.rtf
          %ol
            %li
              The Quick Find window helps you locate specific business objects within the GRC system.
            %li
              Click the tab of the type of object you are looking for
              %i
                (ex: Controls, Products, etc)
            %li
              Type the first few letters of the name of the object you're looking for and press Enter/Return
          %p
            %strong
              Scroll through the short list of
            objects found to find the specific object you're looking for the object to go to that object page
        #helpedit
          .row-fluid
            .span12
              .wysiwyg-area
                %label
                  Help Title
                %input{ 'class': 'span12', 'type': 'text', 'placeholder': 'Enter Help Title Here' }
                %label
                  Help Content
                %textarea{ 'class': 'span12 triple', 'placeholder': 'Enter Help Content Here' }
                .row-fluid
                  .span12
                    %input{ 'class': 'btn btn-warning pull-right disabled', 'type': 'submit', 'value': 'Save' }

  -# Help Modal
  #helpModal{ 'class': 'modal hide fade', 'tabindex': '-1' }
    .modal-header
      %a.btn.btn-mini.pull-right{ 'data-dismiss': 'modal', 'href': '#' }
        %i.grcicon-x-grey
      %a.btn.btn-mini.pull-right.help-edit{ 'href': '#' }
        %i.grcicon-edit
      %h2
        %span
          Quick Help Window
    .modal-body
      .help
        .help-content.rtf
          %ol
            %li
              The Quick Find window helps you locate specific business objects within the GRC system.
            %li
              Click the tab of the type of object you are looking for
              %i
                (ex: Controls, Products, etc)
            %li
              Type the first few letters of the name of the object you're looking for and press Enter/Return
          %p
            %strong
              Scroll through the short list of
            objects found to find the specific object you're looking for the object to go to that object page
        #helpedit
          .row-fluid
            .span12
              .wysiwyg-area
                %label
                  Help Title
                %input{ 'class': 'span12', 'type': 'text', 'value': 'Quick Help Window' }
                %label
                  Help Content
                %textarea{ 'class': 'span12 triple', 'placeholder': 'Enter Help Content Here' }
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                .row-fluid
                  .span12
                    %input{ 'class': 'btn btn-primary pull-right', 'type': 'submit', 'value': 'Save' }

  -# Section to Control Mapper
  #selectorSectionToControl{ 'class': 'modal modal-selector hide fade', 'tabindex': '-1' }
    .modal-header
      .pull-right
        %a.btn.btn-mini{ 'data-dismiss': 'modal', 'href': '#' }
          %i.grcicon-x-grey
      %h2
        Map Controls to
        SECTION-2201
    .modal-filter
      .row-fluid
        .span3
          &nbsp;
        .span3
          .modal-search
            %a.btn.btn-mini.search-reset{ 'href': '#' }
              %i.grcicon-x-grey
            %input{ 'type': 'text', 'class': 'input-block-level', 'placeholder': 'Search controls' }
        .span3.checkbox-filter
          %input{ 'type': 'checkbox', 'id': 'control-type-filter', 'class': 'control-type-filter inline pull-right', 'checked': 'checked' }
          %label{ 'class': 'inline pull-right', 'for': 'control-type-filter' }
            Controls for this program only:
        .span3
          .pull-right
            %a.btn.btn-add{ 'href': '#' }
              %i.grcicon-add
              Control
    .modal-content
      .row-fluid
        .span3
          .selector-info{ 'style': 'margin-right:-10%;' }
            %h4
              %i.grcicon-section-color
              Use of Assets
            %p.code.governance Section-2201
            .rtf
              %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              %ul
                %li Ut enim ad minim veniam
                %li Ut enim ad minim veniam
              %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            %h5
              Already Mapped Controls (2)
            %ul.linked-controls
              %li
                %a{ 'href': '#', 'class': 'jump-to-control' }
                  %span
                    this is a new control (kostya)
                  %small
                    CONTROL-0477
              %li
                %a{ 'href': '#', 'class': 'jump-to-control' }
                  %span
                    another control (k)
                  %small
                    CONTROL-0478
        .span6
          .search-title
            .row-fluid
              .span6
                %h4
                  Search Results (3)
              .span6
                .guide
                  map/unmap all
          .selector-list
            %ul.tree-structure.simple
              %li.control
                .item-main
                  .item-title
                    .row-fluid
                      .span11
                        .oneline
                          %span.title Superb control
                          %span.code K1
                      .span1
                        %input{ 'type': 'checkbox', 'rel': 'tooltip', 'title': 'map' }
              %li.control
                .item-main
                  .item-title
                    .row-fluid
                      .span11
                        .oneline
                          %span.title Another control
                          %span.code CONTROL-AMAZING
                      .span1
                        %input{ 'type': 'checkbox', 'rel': 'tooltip', 'title': 'map' }
              %li.control
                .item-main
                  .item-title
                    .row-fluid
                      .span11
                        .oneline
                          %span.title Control per se
                          %span.code CK-L
                      .span1
                        %input{ 'type': 'checkbox', 'rel': 'tooltip', 'title': 'map' }
              %li.control.selected
                .item-main
                  .item-title
                    .row-fluid
                      .span11
                        .oneline
                          %span.title Verify Passwords via X
                          %span.code ctr.2201
                      .span1
                        %input{ 'type': 'checkbox', 'rel': 'tooltip', 'title': 'map' }
              %li.control
                .item-main
                  .item-title
                    .row-fluid
                      .span11
                        .oneline
                          %span.title J' something
                          %span.code ctr.xyz
                      .span1
                        %input{ 'type': 'checkbox', 'rel': 'tooltip', 'title': 'map', 'checked': 'checked' }
              %li.control
                .item-main
                  .item-title
                    .row-fluid
                      .span11
                        .oneline
                          %span.title Control per du
                          %span.code ctr.221101
                      .span1
                        %input{ 'type': 'checkbox', 'rel': 'tooltip', 'title': 'map', 'checked': 'checked' }
              %li.control
                .item-main
                  .item-title
                    .row-fluid
                      .span11
                        .oneline
                          %span.title J' something
                          %span.code ctr.xyz
                      .span1
                        %input{ 'type': 'checkbox', 'rel': 'tooltip', 'title': 'map' }
              %li.control
                .item-main
                  .item-title
                    .row-fluid
                      .span11
                        .oneline
                          %span.title Control per du
                          %span.code ctr.221101
                      .span1
                        %input{ 'type': 'checkbox', 'rel': 'tooltip', 'title': 'map' }
              %li.control
                .item-main
                  .item-title
                    .row-fluid
                      .span11
                        .oneline
                          %span.title J' something
                          %span.code ctr.xyz
                      .span1
                        %input{ 'type': 'checkbox', 'rel': 'tooltip', 'title': 'map' }
        .span3
          .selector-info{ 'style': 'margin-left:-10%' }
            %h4
              %i.grcicon-control-color
              Verify Passwords via X
            %p.code.governance CTR.2201
            .rtf
              %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              %ul
                %li Ut enim ad minim veniam
                %li Ut enim ad minim veniam
    .modal-footer
      .row-fluid
        .span6
          .deny-buttons
        .span6
          .confirm-buttons
            %a.btn.btn-primary.preventdoubleclick{ 'data-toggle': 'modal-submit', 'href': '#' }
              Save

  -# Section to Control Mapper N/A
  #selectorSectionToControlNA{ 'class': 'modal modal-selector hide fade', 'tabindex': '-1' }
    .modal-header
      .pull-right
        %a.btn.btn-mini{ 'data-dismiss': 'modal', 'href': '#' }
          %i.grcicon-x-grey
      %h2
        Map Controls to
        SECTION-2201
    .modal-filter
      .row-fluid
        .span3
          &nbsp;
        .span3
          .modal-search
            %input{ 'type': 'text', 'class': 'input-block-level', 'placeholder': 'Search controls' }
        .span3.checkbox-filter
          %input{ 'type': 'checkbox', 'id': 'control-type-filter', 'class': 'control-type-filter inline pull-right', 'checked': 'checked' }
          %label{ 'class': 'inline pull-right', 'for': 'control-type-filter' }
            Controls for this program only:
        .span3
          .pull-right
            %a.btn.btn-add{ 'href': '#' }
              %i.grcicon-add
              Control
    .modal-content
      .row-fluid
        .span3
          .selector-info{ 'style': 'margin-right:-10%;' }
            %h4
              %i.grcicon-section-color
              Use of Assets
            %p.code.governance Section-2201
            .rtf
              %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              %ul
                %li Ut enim ad minim veniam
                %li Ut enim ad minim veniam
              %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            %h5
              Mapped Controls
            %input{ 'type': 'checkbox' }
            %strong Controls are not applicable (N/A)

        .span6
          .selector-list
        .span3
          .selector-info{ 'style': 'margin-left:-10%' }
            .no-content
              %h4 NO CONTROL IS SELECTED
              %p Choose one of the controls from the list.

    .modal-footer
      .row-fluid
        .span6
          .deny-buttons
        .span6
          .confirm-buttons
            %a.btn.btn-primary.preventdoubleclick{ 'data-toggle': 'modal-submit', 'href': '#' }
              Save


  -# Create New Program
  #programNew{ 'class': 'modal modal-wide hide fade', 'tabindex': '-1' }
    .modal-header
      .pull-right
        %a.btn.btn-mini{ 'data-dismiss': 'modal', 'href': '#' }
          %i.grcicon-x-grey
      %h2
        Create New Program
    .modal-body
      .row-fluid
        .span6.field-failure
          .field_with_errors
            %label
              Title
              %span.required
                *
              %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Title of Program'}
            %input{ 'type': 'text', 'class': 'input-block-level', 'placeholder': 'Enter Title' }
            %span.help-inline
              %span
                Title can not be empty
      .row-fluid
        .span6
          %label
            Description
            %span.required
              *
            %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Describe program in few sentences'}
          .wysiwyg-area
            %textarea{ 'class': 'span12 double', 'placeholder': 'Enter Description' }
        .span6
          %label
            Owner/Person of Contact
            %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Email of primary contact'}
          %input{ 'type': 'text', 'class': 'input-block-level', 'placeholder': 'Enter email address' }
          %label
            Program URL
            %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'URL'}
          %input{ 'type': 'text', 'class': 'input-block-level', 'placeholder': 'http://www.domain.com/' }
      .row-fluid
        .span12
          .expand-link
            %a{ 'href': '#', 'class': 'show-hidden-fields' }
              %i.grcicon-show
              Show Advanced
              %span.hidden-fields
                Code, Reference URL, Scope, Organization
      .hidden-fields-area
        .row-fluid
          .span6
            %label
              Code
              %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Enter unique code'}
            %input{ 'type': 'text', 'class': 'input-block-level', 'placeholder': 'PROGRAM-XXX' }
          .span6
            %label
              Reference URL
              %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Enter Reference URL'}
            %input{ 'type': 'text', 'class': 'input-block-level', 'placeholder': 'http://www.domain.com/' }
        .row-fluid
          .span6
            %label
              Organization
              %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Enter organization'}
            %input{ 'type': 'text', 'class': 'input-block-level', 'placeholder': 'Enter Organization' }
          .span6
            %label
              Program Scope
              %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Enter Scope of Program'}
            %input{ 'type': 'text', 'class': 'input-block-level', 'placeholder': 'Enter Scope' }
        .row-fluid
          .span12
            .expand-link
              %a{ 'href': '#', 'class': 'show-hidden-fields hide-hidden-fields' }
                %i.grcicon-hide
                Hide Advanced

    .modal-footer
      .row-fluid
        .span6
          .deny-buttons
        .span6
          .confirm-buttons
            %a.btn.btn-primary.preventdoubleclick
              Save

  -# Create New Base Object
  #baseObjectNew{ 'class': 'modal modal-wide hide fade', 'tabindex': '-1' }
    .modal-header
      .pull-right
        %a.btn.btn-mini{ 'data-dismiss': 'modal', 'href': '#' }
          %i.grcicon-x-grey
      %h2
        Create Base Objects
    .modal-body
      .row-fluid
        .span6
          %label
            Title
            %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Title'}
          %input{ 'type': 'text', 'class': 'input-block-level', 'placeholder': 'Enter Title' }
      .row-fluid
        .span6
          %label
            Description
            %span.required
              *
            %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Describe program in few sentences'}
          .wysiwyg-area
            %textarea{ 'class': 'span12 double', 'placeholder': 'Enter Description' }
        .span6
          %label
            Owner/Person of Contact
            %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Email of primary contact'}
          %input{ 'type': 'text', 'class': 'input-block-level', 'placeholder': 'Enter email address' }
          %label
            Object URL
            %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'URL'}
          %input{ 'type': 'text', 'class': 'input-block-level', 'placeholder': 'http://www.domain.com/' }
      .row-fluid
        .span12
          .expand-link
            %a{ 'href': '#', 'class': 'show-hidden-fields' }
              %i.grcicon-show
              Show Advanced
              %span.hidden-fields
                Code, Reference URL, Effective Date, Stop Date
      .hidden-fields-area
        .row-fluid
          .span6
            %label
              Code
              %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Enter unique code'}
            %input{ 'type': 'text', 'class': 'input-block-level', 'placeholder': 'PROGRAM-XXX' }
          .span6
            %label
              Reference URL
              %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Enter Reference URL'}
            %input{ 'type': 'text', 'class': 'input-block-level', 'placeholder': 'http://www.domain.com/' }
        .row-fluid
          .span3
            %label
              Efective Date
              %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Effective Date'}
            %input{ 'type': 'text', 'class': 'input-block-level date', 'placeholder': 'MM/DD/YYYY' }
          .span3
            %label
              Stop Date
              %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Stop Date'}
            %input{ 'type': 'text', 'class': 'input-block-level date', 'placeholder': 'MM/DD/YYYY' }
          .span6
            %label
              Kind/Type
              %i.grcicon-help-black{ 'rel': 'tooltip', 'title': 'Choose Kind/Type'}
            %select.input-block-level
              %option -- Select --
        .row-fluid
          .span12
            .expand-link
              %a{ 'href': '#', 'class': 'show-hidden-fields hide-hidden-fields' }
                %i.grcicon-hide
                Hide Advanced

    .modal-footer
      .row-fluid
        .span6
          .deny-buttons
        .span6
          .confirm-buttons
            %a.btn.btn-primary.preventdoubleclick
              Save